<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setup上下文对象</title>
  </head>
  <body>
    <div id="app">
      <my-com ref="child"></my-com>
    </div>
  </body>

  <template id="com">
    <div>
      <h1>子组件</h1>
    </div>
  </template>

  <script src="../lib/vue.global.js"></script>
  <script>
    const Com = {
      template: "#com",
      data() {
        return {
          a: 1,
          b: 2,
          c: 3,
        };
      },
      methods: {
        fn() {
          this.a = 100;
        },
      },
    };

    Vue.createApp({
      components: {
        MyCom: Com,
      },
      mounted() {
        console.log(this.$refs.child);
      },
    }).mount("#app");
  </script>
</html>
